<template>
    <div class="MNumber">
        <template v-if="!readOnly">
            <div class="rx-number" v-if="options.controls">
                <div @click="subtraction" class="rx-number-icon">
                    <uv-icon name="minus"></uv-icon>
                </div>
                <input
                    class="rx-number-input"
                    v-model="curVal"
                    type="number"
                    :min="options.min"
                    :max="options.max"
                    :placeholder="placeholder"
                    @input="onChange"
                    @blur="onBlur"
                    @focus="onFocus"
                />
                <div @click="addition" class="rx-number-icon">
                    <uv-icon name="plus"></uv-icon>
                </div>
            </div>
            <input
                v-else
                class="ant-input"
                v-model="curVal"
                type="number"
                :min="options.min"
                :max="options.max"
                :placeholder="placeholder"
                @input="onChange"
                @blur="onBlur"
                @focus="onFocus"
            />
        </template>
        <div v-else class="ant-input-canEdit">{{ display }}</div>
    </div>
</template>

<script>
/*
数字控件
 */
import MForm from '../js/MForm'
import FormBase from "../js/FormBase";
import Util from '@/js/Util.js'

export default {
    name: "MNumber",
    mixins: [MForm, FormBase],
    data() {
        return {
            curVal: '',
            options: {},
        }
    },
    computed: {
        display() {
            let pre = this.getLabel('addonBeforeConfig');
            let suffix = this.getLabel('addonAfterConfig');
            let format = this.options.format;
            let val = this.curVal;
            if(!val){
                return
            }
            if (format == "chinese") {
                val = Util.toChineseMoney(this.curVal);
            } else if (format == "thousand" && val) {
                val = this.options.format == 'thousand' ? `${this.curVal}`.replace(/\B(?=(\d{3})+(?!\d))/g, ',') : `${this.curVal}`;
            } else if (format == "percentSmall") {
                val = (val * 100).toFixed(this.options.decimalLength-2) + "%";
            } else if (format == "percent") {
                if (val == undefined || val == null) {
                    val = val;
                } else {
                    val = val + "%";
                }
            }
            if (!val && val != 0) {
                val = ''
            }
            return `${pre} ${val} ${suffix}`.trim();
        },
    },
    created() {
        this.options = this.metadata.options;
    },
    methods: {
        subtraction() {
            let val = this.curVal - this.options.step;
            if (val < this.options.min) {
                val = this.options.min
            }
            this.curVal =this.options.decimalLength? parseFloat(Util.roundToPrecision(val,this.options.decimalLength)):val;
            this.onChange(this.curVal);
            this.onStep()
        },
        addition() {
            let val = Number(this.curVal) + this.options.step;
            if (val > this.options.max) {
                val = this.options.max
            }
            this.curVal =this.options.decimalLength? parseFloat(Util.roundToPrecision(val,this.options.decimalLength)):val;
            this.onChange(this.curVal);
            this.onStep()
        },
        onStep() {
            this.triggerEmitEvents('step', this.curVal, this.data)
        },
        onChange: Util.debounce(function (val) {
            this.updateValue(Number(this.curVal));
            this.triggerEmitEvents('change', this.curVal, this.data)
        }, 300),
        onBlur() {
            if (this.curVal < this.options.min) {
                this.curVal = this.options.min
            }
            if (this.curVal > this.options.max) {
                this.curVal = this.options.max
            }
            this.curVal =this.options.decimalLength?parseFloat(Util.roundToPrecision(this.curVal,this.options.decimalLength)):this.curVal;
            this.updateValue(Number(this.curVal));
            this.triggerEmitEvents('blur', this.curVal, this.data)
        },
        onFocus(val){
            this.triggerEmitEvents('focus', val, this.data)
        },
        getLabel(type) {
            if (this.options[type]) {
                return this.options[type].label || ""
            }
        },
    },
    watch: {
        value: {
            handler(v) {
                this.curVal = v;
            },
            immediate: true
        }
    },
}
</script>

<style scoped>
.rx-number {
    display: flex;
    height: 2rem;
    width: 100%;
    align-items: center;
    padding: 0rem 0.5rem;
    box-sizing: border-box;
    border: 1px solid rgba(232, 232, 232, 1);
    border-radius: 5px;
}

.rx-number-icon {

}

.rx-number-input {
    flex: 1;
    margin: 0rem 0.5rem;
    height: 2rem;
    border-left: 1px solid rgba(232, 232, 232, 1);
    border-right: 1px solid rgba(232, 232, 232, 1);
    padding-left: 0.5rem;
}
</style>
